<template>
  <div class="login-form login-register">
    <section class="mlogin-user">
      <section class="mlogin-name">
        <section class="mlogin-left tel">手机号码</section>
        <section class="mlogin-right">
          <input
            type="text"
            name="mobile"
            v-model="formDataLogin.mobile"
            placeholder="请输入您的手机号码"
            value
          />
        </section>
      </section>
      <section class="mlogin-name">
        <section class="mlogin-left password">密码</section>
        <section class="mlogin-right">
          <input
            type="password"
            name="password"
            v-model="formDataLogin.password"
            placeholder="请输入您的密码"
            value
          />
        </section>
        <!-- check_apply_mobile_begin" 后台开启验证手机号验证 -->
        <!-- <a class="forget-btn" href="javascript:" @click="Jump('/mb/loginRegister/forget')"  v-if="check_apply_mobile_begin==1">忘记密码？</a> -->
      </section>
      <section class="mlogin-name">
        <section class="mlogin-left verify">验证码</section>
        <section class="mlogin-right">
          <input
            type="text"
            placeholder="请输入右图验证码"
            name="verify"
            class="setpwd-text"
            v-model="formDataLogin.verify"
          />
        </section>
        <img :src="verifyImg" class="code-img" @click="refreshVerify" />
      </section>
    </section>
    <section class="mlogin-but" @click="login">
      <van-button round href="javascript:" class="btn red-gra-btn">登录</van-button>
    </section>
  </div>
</template>

<script>
import Vue from 'vue'

import { getVerify, postLogin } from '@/api/loginRegister/index'
import { validLength, validateMobile } from '@/utils/validate'
import { base64_encode } from '@/utils/index'
import Store from '@/utils/store'

export default Vue.extend({
  data() {
    return {
      verifyImg: '', // 图形验证码
      check_apply_mobile_begin: '',
      formDataLogin: {
        mobile: '',
        password: '',
        verify: ''
      },
      sid: '',
      testShop: [6, 3739, 3829, 3842, 3737], // 测试使用的店铺id
      isTestShop: false
    }
  },
  methods: {

    init() {
      // this.check_apply_mobile_begin = this.getCheckMobile.checkMobile
      if (this.$route.query.sid) {
        this.sid = this.$route.query.sid
      } else {
        this.sid = Store.fetchLocal('sid') ? Store.fetchLocal('sid') : undefined
      }
      this.testShop.findIndex((item) => {
        if (this.sid == item) {
          this.isTestShop = true
          return false
        }
      })
    },
    Jump(url, data) {
      this.$JumpPath(this, url, data)
    },
    // 图形验证码
    refreshVerify() {
      getVerify().then((res) => {
        // this.verifyImg = res
        const src = `data:image/jpg;base64,${base64_encode(new Uint8Array(res).reduce((data, byte) => data + String.fromCharCode(byte), ''))}`
        this.verifyImg = src
      })
    },

    /* base64_encode(str) {
      let c1,
        c2,
        c3
      const base64EncodeChars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/'
      let i = 0,
        len = str.length,
        string = ''

      while (i < len) {
        c1 = str.charCodeAt(i++) & 0xff
        if (i == len) {
          string += base64EncodeChars.charAt(c1 >> 2)
          string += base64EncodeChars.charAt((c1 & 0x3) << 4)
          string += '=='
          break
        }
        c2 = str.charCodeAt(i++)
        if (i == len) {
          string += base64EncodeChars.charAt(c1 >> 2)
          string += base64EncodeChars.charAt(((c1 & 0x3) << 4) | ((c2 & 0xF0) >> 4))
          string += base64EncodeChars.charAt((c2 & 0xF) << 2)
          string += '='
          break
        }
        c3 = str.charCodeAt(i++)
        string += base64EncodeChars.charAt(c1 >> 2)
        string += base64EncodeChars.charAt(((c1 & 0x3) << 4) | ((c2 & 0xF0) >> 4))
        string += base64EncodeChars.charAt(((c2 & 0xF) << 2) | ((c3 & 0xC0) >> 6))
        string += base64EncodeChars.charAt(c3 & 0x3F)
      }
      return string
    }, */
    login() {
      // 如果是自动化测试店铺，只验证手机号长度
      // if (this.isTestShop) {
      //   if (!validLength(this.formDataLogin.mobile)) {
      //     this.$Error('请输入正确的手机号码')
      //     return false
      //   }
      // } else {
      //   if (!validateMobile(this.formDataLogin.mobile)) {
      //     this.$Error('请输入正确的手机号码')
      //     return false
      //   }
      // }
      if (!validLength(this.formDataLogin.password)) {
        this.$Error('请输入密码')
        return false
      }
      if (!validLength(this.formDataLogin.verify)) {
        this.$Error('请输入验证码')
        return false
      }
      this.$loadingWrap.show()
      setTimeout(() => {
        this.$loadingWrap.close()
      }, 10000)

      // const param = Object.assign(this.formDataReply, {}, true)
      const data = Object.assign(this.formDataLogin, {}, true)
      postLogin(data).then((res) => {
        this.$loadingWrap.close()
        if (res.status === 1) {
          if (res.data.user_id) {
            Store.saveLocal('uid', res.data.user_id)
          }
          window.location.href = res.data.url
        } else {
          this.$Error(res.msg)
          // 登录失败刷新验证码
          this.refreshVerify()
        }
      })
    }
  },
  created() {
    // console.log(11111)
    this.init()
    this.refreshVerify()
  }
})
</script>

<style lang="scss">
// @import "src/styles/btn.scss"
@import "src/styles/loginRegister"
</style>
